<template lang="pug">
.wang-editor.app-container
  .get-text
    el-button(@click="handlerText") 获取富文本内容
    el-button(@click="handlerClear") 清除富文本内容
  #editor-main
</template>

<script setup>
import { initEditor, setContent, getContent, clearContent, destroyEditor } from './editor'

import { reactive, getCurrentInstance, onMounted, onUnmounted } from 'vue'

const { proxy } = getCurrentInstance() // 内部组件实例

// 数据
const state = reactive({
})

onMounted(() => {
  // 初始化富文本编辑器
  initEditor()

  // 设置编辑器内容
  setContent('<p>用 JS 设置的内容</p>')
})

onUnmounted(() => {
  destroyEditor()
})

// 获取 html 内容
function handlerText () {
  console.log(getContent())
}

// 清楚 html 内容
function handlerClear () {
  clearContent()
}
</script>

<style lang="scss">
  #editor-main {
    margin-top: 10px;
  }
</style>
